<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物中心</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicons -->


    <!-- ************************* CSS Files ************************* -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="senshi_official_website/static/css/bootstrap.css">

    <!-- Vendor CSS -->
    <link rel="stylesheet" href="senshi_official_website/static/css/vendor.css">

    <!-- style css -->
    <link rel="stylesheet" href="senshi_official_website/static/css/main.css">
</head>

<body>

<!-- Preloader Start -->
<div class="ft-preloader active">
    <div class="ft-preloader-inner h-100 d-flex align-items-center justify-content-center">
        <div class="ft-child ft-bounce1"></div>
        <div class="ft-child ft-bounce2"></div>
        <div class="ft-child ft-bounce3"></div>
    </div>
</div>
<!-- Preloader End -->

<!-- Main Wrapper Start -->
<div class="wrapper">
    <!-- Header Start -->
    <header class="header">
        <div class="header__inner fixed-header">
            <div class="header__main">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="header__main-inner">
                                <div class="header__main-left">
                                    <div class="logo">
                                        <a href="index.jsp" class="logo--normal">
                                            <img src="senshi_official_website/static/logo1.png" width="70%" height="70%"
                                                 alt="Logo">
                                        </a>
                                    </div>
                                </div>
                                <div class="header__main-center">
                                    <nav class="main-navigation text-center d-none d-lg-block">
                                        <ul class="mainmenu">
                                            <li class="mainmenu__item menu-item-has-children">
                                                <a href="index.jsp" class="mainmenu__link">
                                                    <span class="mm-text">首页</span>
                                                </a>
                                            </li>
                                            <li class="mainmenu__item menu-item-has-children megamenu-holder">
                                                <a href="shop-three-columns.jsp"
                                                   class="mainmenu__link">
                                                    <span class="mm-text">购物</span>
                                                </a>
                                            </li>
                                            <li class="mainmenu__item menu-item-has-children">
                                                <a href="#" class="mainmenu__link">
                                                    <span class="mm-text">个人中心</span>
                                                </a>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="goMyAccount">
                                                            <span class="mm-text">我的账号</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="goCart">
                                                            <span class="mm-text">购物车</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="goTracking">
                                                            <span class="mm-text">跟踪订单</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="mainmenu__item">
                                                <a href="contact-us.jsp"
                                                   class="mainmenu__link">
                                                    <span class="mm-text">联系我们</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="header__main-right">
                                    <div class="header-toolbar-wrap">
                                        <div class="header-toolbar">
                                            <div style="width: 100px;"
                                                 class="header-toolbar__item header-toolbar--search-btn">
                                                <a id="href1" href="login-register.jsp">
                                                    <span id="userName">登录 & 注册</span>
                                                </a>
                                            </div>
                                            <div class="header-toolbar__item header-toolbar--search-btn">
                                                <a href="#searchForm" class="header-toolbar__btn toolbar-btn">
                                                    <i class="la la-search"></i>
                                                </a>
                                            </div>

                                            <div class="header-toolbar__item header-toolbar--minicart-btn">
                                                <a href="#miniCart" class="header-toolbar__btn toolbar-btn">
                                                    <i class="la la-shopping-cart"></i>
                                                    <span>01</span>
                                                </a>
                                            </div>
                                            <div class="header-toolbar__item d-block d-lg-none">
                                                <a href="#offcanvasMenu"
                                                   class="header-toolbar__btn toolbar-btn menu-btn">
                                                    <div class="hamburger-icon">
                                                        <span></span>
                                                        <span></span>
                                                        <span></span>
                                                        <span></span>
                                                        <span></span>
                                                        <span></span>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header End -->

    <!-- Breadcrumb area Start -->
    <section class="page-title-area bg-image ptb--80" data-bg-image="assets/img/bg/page_title_bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="page-title">购物</h1>
                    <ul class="breadcrumb">
                        <li><a href="index.jsp">首页</a></li>
                        <li class="current"><span>购物中心</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb area End -->

    <!-- Main Content Wrapper Start -->
    <div class="main-content-wrapper">
        <div class="shop-page-wrapper ptb--80">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="shop-toolbar mb--50">
                            <div class="row align-items-center">
                                <div class="col-md-5 mb-sm--30 mb-xs--10">
                                    <div class="shop-toolbar__left">
                                        <div class="product-ordering">
                                            <select onclick="query()" id="sort"
                                                    class="nice-select product-ordering__select ">
                                                <option value="null">默认排序</option>
                                                <option value="maxGoMin">按销量排序</option>
                                                <option value="maxToMin">价格从高到低</option>
                                                <option value="minToMax">价格从低到高</option>
                                            </select>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="shop-toolbar__right d-flex justify-content-md-end justify-content-start flex-sm-row flex-column">
                                        <div class="product-view-mode ml--50 ml-xs--0">
                                            <a class="active" href="#" data-target="grid">
                                                <img src="senshi_official_website/static/picture/grid.png" alt="Grid">
                                            </a>
                                            <a href="#" data-target="list">
                                                <img src="senshi_official_website/static/picture/list.png" alt="Grid">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="shop-products">
                            <div id="products" class="row">

                            </div>
                        </div>
                        <nav class="pagination-wrap">
                            <ul class="pagination">
                                <li><span class="page-number current">1</span></li>
                                <li><a href="#" class="page-number">2</a></li>
                                <li><span class="dot"></span></li>
                                <li><span class="dot"></span></li>
                                <li><span class="dot"></span></li>
                                <li><a href="#" class="page-number">16</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main Content Wrapper Start -->

    <!-- Footer Start-->
    <footer class="footer bg-color" data-bg-color="#f4f8fa">
        <div class="footer-top">
            <div class="container-fluid">
                <div class="row border-bottom pt--70 pb--70">
                    <div class="col-lg-3 col-sm-6 offset-md-1 offset-lg-0 mb-md--45">
                        <div class="footer-widget">
                            <div class="textwidget">
                                <figure class="footer-logo mb--30">
                                    <img src="senshi_official_website/static/logo1.png" width="50%" height="50%"
                                         alt="Logo">
                                </figure>
                                <p>
                                    追求品质生活，打造更舒服的家居生活就选择森饰家具，给自己一份放心，更是给自己的一份安心</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-3 offset-lg-1 offset-sm-2 mb-md--45">
                        <div class="footer-widget">
                            <h3 class="widget-title mb--35 mb-sm--20">公司简介</h3>
                            <div class="footer-widget">
                                <ul class="footer-menu">
                                    <li><a href="">关于我们</a></li>
                                    <li><a href="#">事务</a></li>
                                    <li><a href="contact-us.jsp">联系我们</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-4 offset-md-1 offset-lg-0 mb-xs--45">
                        <div class="footer-widget">
                            <h3 class="widget-title mb--35 mb-sm--20">产品</h3>
                            <div class="footer-widget">
                                <ul class="footer-menu">
                                    <li><a href="#">价格</a></li>
                                    <li><a href="#">产品特征</a></li>
                                    <li><a href="#">客户</a></li>
                                    <li><a href="#">演示</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-4 mb-xs--45">
                        <div class="footer-widget">
                            <h3 class="widget-title mb--35 mb-sm--20">帮助</h3>
                            <div class="footer-widget">
                                <ul class="footer-menu">
                                    <li><a href="#">介绍</a></li>
                                    <li><a href="#">反馈</a></li>
                                    <li><a href="#">首页</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-4">
                        <div class="footer-widget">
                            <h3 class="widget-title mb--35 mb-sm--20">社交</h3>
                            <div class="footer-widget">
                                <ul class="footer-menu">
                                    <li><a href="#">脸书</a></li>
                                    <li><a href="#">推特</a></li>
                                    <li><a href="#">领英</a></li>
                                    <li><a href="#">Google +</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-middle ptb--40">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-11">
                        <div class="footer-widget">
                            <div class="taglist">
                                <a href="#">隐私政策</a>
                                <a href="#">缺陷披露政策</a>
                                <a href="#">使用条款</a>
                                <a href="#">上海工商</a>
                                <a href="#">沪公网安备31010402001234号</a>
                                <a href="#">沪ICP备170555232号</a>
                                <a href="#">Cookies设置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer End-->

    <!-- OffCanvas Menu Start -->
    <div class="offcanvas-menu-wrapper" id="offcanvasMenu">
        <div class="offcanvas-menu-inner">
            <a class="btn-close" href="">
                <i class="la la-remove"></i>
            </a>
            <nav class="offcanvas-navigation">
                <ul class="offcanvas-menu">
                    <li class="menu-item-has-children active">
                        <a href="index.jsp">首页</a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="goCart">购物</a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">个人中心</a>
                        <ul class="sub-menu">
                            <li>
                                <a href="goMyAccount">我的账号</a>
                            </li>
                            <li>
                                <a href="WEB-INF/cart.jsp">购物车</a>
                            </li>

                            <li>
                                <a href="goTracking">跟踪订单</a>
                            </li>

                        </ul>
                    </li>
                    <li>
                        <a href="contact-us.jsp">联系我们</a>
                    </li>
                </ul>
                <div class="site-info vertical">
                    <div class="site-info__item">
                        <a href="tel:+01223566678"><strong>+01 2235 666 78</strong></a>
                        <a href="mailto:Support@contixs.com">Support@furtrate.com</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- OffCanvas Menu End -->

    <!-- 迷你购物车 -->
    <aside class="mini-cart" id="miniCart">
        <div class="mini-cart-wrapper">
            <div class="mini-cart__close">
                <a href="#" class="btn-close"><i class="la la-remove"></i></a>
            </div>
            <div class="mini-cart-inner">
                <h3 class="mini-cart__heading mb--45">Shopping Cart</h3>
                <div class="mini-cart__content">
                    <ul class="mini-cart__list">
                        <li class="mini-cart__product">
                            <a href="#" class="mini-cart__product-remove">
                                <i class="la la-remove"></i>
                            </a>
                            <div class="mini-cart__product-image">
                                <img src="senshi_official_website/static/picture/prod-01-100x100.jpg" alt="products">
                            </div>
                            <div class="mini-cart__product-content">
                                <a class="mini-cart__product-title" href="senshi_official_website/product-details.html">Golden
                                    Easy Spot Chair.</a>
                                <span class="mini-cart__product-quantity">1 x $49.00</span>
                            </div>
                        </li>
                        <li class="mini-cart__product">
                            <a href="#" class="mini-cart__product-remove">
                                <i class="la la-remove"></i>
                            </a>
                            <div class="mini-cart__product-image">
                                <img src="senshi_official_website/static/picture/prod-02-100x100.jpg" alt="products">
                            </div>
                            <div class="mini-cart__product-content">
                                <a class="mini-cart__product-title" href="senshi_official_website/product-details.html">Golden
                                    Easy Spot Chair.</a>
                                <span class="mini-cart__product-quantity">1 x $49.00</span>
                            </div>
                        </li>
                        <li class="mini-cart__product">
                            <a href="#" class="mini-cart__product-remove">
                                <i class="la la-remove"></i>
                            </a>
                            <div class="mini-cart__product-image">
                                <img src="senshi_official_website/static/picture/prod-03-100x100.jpg" alt="products">
                            </div>
                            <div class="mini-cart__product-content">
                                <a class="mini-cart__product-title" href="senshi_official_website/product-details.html">Golden
                                    Easy Spot Chair.</a>
                                <span class="mini-cart__product-quantity">1 x $49.00</span>
                            </div>
                        </li>
                    </ul>
                    <div class="mini-cart__total">
                        <span>Subtotal</span>
                        <span class="ammount">$98.00</span>
                    </div>
                    <div class="mini-cart__buttons">
                        <a href="goCart" class="btn btn-fullwidth btn-bg-primary mb--20">查看购物车</a>
                        <a href="goCheckout" class="btn btn-fullwidth btn-bg-primary">结账</a>
                    </div>
                </div>
            </div>
        </div>
    </aside>
    <!-- Mini Cart End -->

    <!-- 搜索栏 -->
    <div class="searchform__popup" id="searchForm">
        <a href="#" class="btn-close"><i class="la la-remove"></i></a>
        <div class="searchform__body">
            <p>Start typing and press Enter to search</p>
            <form class="searchform">
                <input type="text" name="popup-search" id="popup-search" class="searchform__input"
                       placeholder="Search Entire Store...">
                <button type="submit" class="searchform__submit"><i class="la la-search"></i></button>
            </form>
        </div>
    </div>
    <!-- Searchform Popup End -->

    <!-- Quick View Modal Start -->
    <div class="modal fade product-modal" id="productModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="la la-remove"></i></span>
                    </button>
                    <div class="row" id="product_show"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Qicuk View Modal End -->

    <!-- Global Overlay Start -->
    <div class="global-overlay"></div>
    <!-- Global Overlay End -->

    <!-- Global Overlay Start -->
    <a class="scroll-to-top" href=""><i class="la la-angle-double-up"></i></a>
    <!-- Global Overlay End -->
</div>
<!-- Main Wrapper End -->


<!-- ************************* JS Files ************************* -->

<!-- jQuery JS -->
<script src="senshi_official_website/static/js/vendor.js"></script>

<!-- Main JS -->
<script src="senshi_official_website/static/js/main.js"></script>
</body>
<script>
    $(function () {
        init()
    })

    function init() {
        let name = "${sessionScope.consumer.consumerName}";

        if (name !== "" && name != null) {
            console.log(name)
            $("#userName").html("欢迎" + name);
            $("#href1").attr("href","goMyAccount");
        } else {
            $("#userName").html = "登录 & 注册";
        }
    }
    $(function () {
        shop_products(1, null)
    })

    function price(id, product_id) {
        if (id.style.color === "red") {
            id.style.color = ""
            $.ajax({
                url: "products/product/" + product_id,
                type: "GET",
                dataType: "JSON",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data)
                    if (data.code === 200) {
                        let temp = `   <span class="money">￥\${data.data.productMinPrice}</span>
                                       <span class="money-separator">-</span>
                                       <span class="money">￥\${data.data.productMaxPrice}</span>`
                        $("#price" + product_id).html(temp)
                        $("#eprice" + product_id).html(temp)
                    }

                },
                error: function () {
                    alert("出错了")
                }
            })
            $("#price" + product_id).html(temp)
            $("#eprice" + product_id).html(temp)
        } else {
            let allElements = document.querySelectorAll('.product-size-swatch-btn,.product-size-variation-btn');

            // 将所有元素的样式重置为原始状态
            allElements.forEach(function (element) {
                element.style.color = '';
            });

            // 将当前元素的样式更改
            id.style.color = "red";
            let size_id = id.id

            $.ajax({
                url: "products/" + product_id + "/" + size_id,
                type: "GET",
                dataType: "JSON",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data)
                    if (data.code === 200) {
                        let temp = ` <span class="money">￥\${data.data.price}</span>`
                        $("#price" + product_id).html(temp)
                        $("#eprice" + product_id).html(temp)
                    }

                },
                error: function () {
                    alert("出错了")
                }
            })
        }
        // 获取所有需要更改样式的元素

    }

    function shop_products(pageNo, query) {
        console.log(query)
        $.ajax({
            url: "products/productList/" + pageNo + "/" + query,
            type: "GET",
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data)
                if (data.code === 200) {
                    let temp = "";
                    $.each(data.data, function (index, item) {
                        temp += `
<div class="col-xl-4 col-sm-6 mb--50">
                                    <div class="ft-product">
                                        <div class="product-inner">
                                            <div class="product-image">
                                                <figure class="product-image--holder">
    <img alt="Product" src="senshi_official_website/static/picture/\${item.productImage}">
  </figure>
          <a class="product-overlay" href="senshi_official_website/product-details.html"></a>
    <div class="product-action">
       <a class="action-btn" data-bs-target="#productModal"
                                                       data-bs-toggle="modal" onclick="eye_click(\${item.productId})">
                                                        <i class="la la-eye"></i>
                                                          </a>
                                                    <a class="action-btn" href="senshi_official_website/wishlist.html">
                                                        <i class="la la-heart-o"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="product-info">
                                                <div class="product-category">
                                                    <a href="senshi_official_website/product-details.html">\${item.productName}</a>
                                                </div>
                                                   <h3 class="product-title"><a href="senshi_official_website/product-details.html">
                                                   \${item.productDescription}</a></h3>
                                                    <div class="product-info-bottom">
                                                    <div class="product-price-wrapper">
                                                        <span class="money">￥\${item.productPrice}</span>
                                                    </div>
<a class="add-to-cart pr--15" onclick="addToShopCart(\${item.productId})">
                                                        <i class="la la-plus"></i>
                                                        <span>添加到购物车</span>
                                                    </a>
  </div>
                                            </div>
                                        </div>
                                    </div>
 <div class="ft-product-list">
                                            <div class="product-inner">
                                                <figure class="product-image">
                                                    <a href="product-details.html">
                                                        <img src="senshi_official_website/static/picture/\${item.productImage}" alt="Products">
                                                    </a>
                                                    <div class="product-thumbnail-action">
                                                        <a data-bs-toggle="modal" data-bs-target="#productModal" class="action-btn quick-view" onclick="eye_click(\${item.productId})">
                                                            <i class="la la-eye"></i>
                                                        </a>
                                                    </div>
                                                </figure>
 <div class="product-info">
                                                    <h3 class="product-title mb--25">
                                                        <a href="product-details.html">\${item.productName}</a>
                                                    </h3>
                                                    <div class="ft-product-action-list mb--20">
                                                        <div class="product-size mb--25">
                                                            <div class="product-size-swatch">
                                                                <span onclick="price(this,\${item.productId})"
id="1" class="product-size-swatch-btn variation-btn">
                                                                    S
                                                                </span>
                                                                <span onclick="price(this,\${item.productId})"
id="2" class="product-size-swatch-btn variation-btn">
                                                                    M
                                                                </span>
                                                                <span onclick="price(this,\${item.productId})"
id="3" class="product-size-swatch-btn variation-btn">
                                                                    L
                                                                </span>
                                                                <span onclick="price(this,\${item.productId})"
id="4" class="product-size-swatch-btn variation-btn">
                                                                    XL
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                     <div id="price\${item.productId}" class="product-price-wrapper mb--15 mb-sm--10">
                                                        <span class="money">￥\${item.productMinPrice}</span>
                                                        <span class="money-separator">-</span>
                                                        <span class="money">￥\${item.productMaxPrice}</span>
                                                    </div>
                                                    <p class="product-short-description mb--20">
                                                     \${item.productDescription}   </p>
                                                    <div class="ft-product-action-list d-flex align-items-center">
                                                        <a onclick="addToShopCart(\${item.productId})" class="btn btn-size-md">添加到购物车</a>
                                                        <a href="wishlist.html" class="ml--20 action-btn">
                                                            <i class="la la-heart-o"></i>
                                                        </a>
                                                        <a href="wishlist.html" class="ml--20 action-btn">
                                                            <i class="la la-repeat"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
`
                    })
                    $("#products").empty()
                    $("#products").append(temp)
                }
            }
        })
    }

    function eye_click(productId) {
        $.ajax({
            url: "products/product/" + productId,
            type: "GET",
            dataType: "JSON",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $('#product_show').empty()
                if (data.code === 200) {
                    $("#product_show").append(`
                    <div class="col-lg-6">
                        <div class="element-carousel slick-vertical-center">
                            <div class="product-image">
                                <div class="product-image--holder">
                                    <a href="senshi_official_website/product-details.html">
                                        <img src="senshi_official_website/static/picture/\${data.data.productImage}" alt="Product Image" class="primary-image">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="modal-box product-summary">
                            <h3 class="product-title mb--20">\${data.data.productName}</h3>
                            <p class="product-short-description mb--25">\${data.data.productDescription}</p>
                            <div id="eprice\${data.data.productId}" class="product-price-wrapper mb--25">
                                <span class="money">￥\${data.data.productMinPrice}</span>
                                <span class="price-separator">-</span>
                                <span class="money">￥\${data.data.productMaxPrice}</span>
                            </div>
                            <form action="#" class="variation-form mb--30">
                                <div class="product-size-variations d-flex align-items-center mb--15">
                                    <p class="variation-label">规格:</p>
                                    <div class="product-size-variation variation-wrapper">
                                        <div class="variation">
                                            <a class="product-size-variation-btn" onclick="price(this,\${data.data.productId})"
id="1" data-bs-toggle="tooltip" data-bs-placement="top" title="S">S</a>
                                        </div>
                                        <div class="variation">
                                            <a class="product-size-variation-btn" onclick="price(this,\${data.data.productId})"
id="2" data-bs-toggle="tooltip" data-bs-placement="top" title="M">M</a>
                                        </div>
                                        <div class="variation">
                                            <a class="product-size-variation-btn" onclick="price(this,\${data.data.productId})"
id="3" data-bs-toggle="tooltip" data-bs-placement="top" title="L">L</a>
                                        </div>
                                        <div class="variation">
                                            <a class="product-size-variation-btn" onclick="price(this,\${data.data.productId})"
id="4" data-bs-toggle="tooltip" data-bs-placement="top" title="XL">XL</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="product-action d-flex flex-sm-row flex-column align-items-sm-center align-items-start mb--30">
                                <div class="quantity-wrapper d-flex align-items-center mr--30 mr-xs--0 mb-xs--30">
                                    <label class="quantity-label" for="quick-qty">数量:</label>
                                    <div class="quantity">
                                        <input type="number" class="quantity-input" name="qty" id="quick-qty" value="1" min="1">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-size-sm btn-shape-square" onclick="addToShopCart{\${data.data.productId}}">
                                    添加到购物车
                                </button>
                            </div>
                        </div>
                    </div>
                    `)
                }
            }
        })
    }

    $(document).ready(function () {
        $('.nice-select').niceSelect(); // 初始化niceSelect插件

        // 绑定点击事件
        $('#sort').on('change', function () {
            query(); // 调用query函数
        });
    });

    function query() {
        let query = $("#sort").val()

        console.log(query)

        shop_products(1, query)
    }

    function addToShopCart(productId,sizeId,productQuantity){
        if ("${sessionScope.consumer}"===null){
            console.log("${sessionScope.consumer}")
            alert("${sessionScope.consumer}")
        }else {
            console.log("${sessionScope.consumer}")
            let ConsumerProductRelationshipRel={consumerPhone:"${sessionScope.consumer.consumerPhone}"
                ,consumerId:"${sessionScope.consumer.consumerId}",productId:productId,sizeId:sizeId,productQuantity:productQuantity};
            var request = JSON.stringify(ConsumerProductRelationshipRel);
            $.ajax({
                url: "shopCart/addToShopCart",
                dataType: "json",
                data: request,
                type: "post",
                contentType: "application/json; charset=utf-8",
                success: function(response) {
alert(response.msg)
                },error:function (){
                   window.location.href="login-register.jsp"
                }
            })
        }

    }
</script>
</html>